<template>
  <div class="index">
    <!-- 头部 -->
    <header>
      <div class="top">
        <div class="left">智慧园区管理平台</div>
        <el-menu :default-active="id || '1'" mode="horizontal" router text-color="#eee" background-color="rgb(8, 44, 97)"
          :ellipsis="false" style="margin: 0 auto" active-text-color="#fff">
          <el-menu-item index="1" route="/index/home" @click="currentClick">综合态势</el-menu-item>
          <el-menu-item index="2" route="/index/operation" @click="currentClick">运营管理</el-menu-item>
          <el-menu-item index="3" route="/index/tenement" @click="currentClick">物业管理</el-menu-item>
          <el-menu-item index="4" route="/index/visualization" @click="currentClick">数据可视</el-menu-item>
          <el-menu-item index="5" route="/index/admin" @click="currentClick">配置管理</el-menu-item>
        </el-menu>
        <div class="right">
          <el-icon style="vertical-align: middle; font-size: 20px">
            <BellFilled />
          </el-icon>
          <el-icon style="
                  vertical-align: middle;
                  background-color: #fff;
                  color: rgba(8, 44, 97, 1);
                  border-radius: 50%;
                  padding: 2px;
                  font-size: 18px;
                  margin: 0 10px 0 20px;
                ">
            <!-- @click="addAdmin" -->
            <el-dropdown style="background: transparent;">
              <UserFilled />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="goLogin">登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-icon>
          <span>admin</span>
        </div>
      </div>
      <div class="bottom">
        项目地址：&emsp;&emsp;
        <el-select placeholder="超梦忆灵科创园" v-model="value" style="height: 40px">
          <el-option label="请选择" value="1" />
          <el-option label="衡海设计科创园" value="2" />
          <el-option label="德信AI产业科技园" value="3" />
          <el-option label="菲篁影视娱乐产业园" value="4" />
          <el-option label="讯特产业科技园" value="5" />
        </el-select>
        <span>{{ time }}</span>
      </div>
    </header>
    <!-- 内容 -->
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, onMounted } from "vue";

var router = useRouter();
var time = ref("");
var value = ref('');
time.value = new Date().toLocaleString();
onMounted(() => {
  setInterval(() => {
    time.value = new Date().toLocaleString();
  }, 1000);
});
//点击路由修改默认索引
var id = ref();
var currentClick = (index) => {
  id.value = index.index;
};

// 点击路由添加管理员（不要删）
var addAdmin = () => {
  router.push('/register')
}
var goLogin = () => {
  router.push('/login')
}
</script>
<style scoped>
.index {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.index header {
  height: 80px;
}

.index .top {
  height: 40px;
  background: rgba(8, 44, 97, 1);
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  color: #fff;
}

.index .top .left,
.index .top .right {
  line-height: 40px;
  font-size: 12px;
}

.index .top .left {
  font-weight: 600;
  font-size: 20px;
}

.index .bottom {
  height: 40px;
  background: rgba(65, 92, 133, 1);
  color: white;
  padding-left: 25px;
  line-height: 40px;
}

.index .bottom span {
  float: right;
  margin-right: 50px;
  font-size: 14px;
}

.index main {
  flex: 1;
  background: #eee;
}

:deep(.el-menu--horizontal > .el-menu-item) {
  border-bottom: 3px solid transparent;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item.is-active) {
  border-bottom: 3px solid rgb(2, 109, 155);
}
</style>
